<template>
	<view class="launch">
		<view class="message_top">
			<view class="message_top_title" :style="{top:computedTop}">投放广告</view>
			<view class="message_top_back" :style="{top:computedTop}" @click="Back">
				<image src="../../static/search/back.png" class="bfbimages"></image>
			</view>
		</view>

		<view class="launch_bto">
			<view class="launch_bto_box">

				<view class="launch_bto_box_one">
					<view class="flex"
						style="width: 28rpx;height: 28rpx;text-align: center;line-height: 28rpx;margin-right: 12rpx;">
						<image src="../../static/red_wenhao.png" class="bfbimages"></image>
					</view>
					<text>规则</text>
				</view>

				<view class="cj_hb_list" style="margin: 60rpx auto 0;">
					<view class="cj_hb_list_L">
						<text>发放范围</text>
					</view>
					<view class="cj_hb_list_R">
						<view class="cj_hb_list_selete" v-for="(item,index) in FnaweiList" :key="index"
							style="margin-right: 8rpx;">
							<text>{{item.name}}</text>
							<label>
								<checkbox :value="item.isA" :checked="item.isA"
									style="width: 28rpx;height: 28rpx;background: #CCCCCC;margin-left: 5rpx;transform:scale(0.7)"
									@click="Cfwei(item)" />
							</label>
						</view>
					</view>
				</view>

				<view class="cj_hb_list" style="margin: 60rpx auto 0;" v-if="FnaweiList[1].isA">
					<view class="cj_hb_list_L" style="justify-content: flex-end;">
						<text>行政范围</text>
					</view>
					<view class="cj_hb_list_R">
						<view class="cj_hb_list_R_inp2" @click="SeleteDW">
							<input type="text" placeholder="请选择"
								style="margin-left: 10rpx;margin-right: 10rpx;color: #333333;" :disabled="true"
								v-model="coordinate" />
							<view class="flex"
								style="width: 20rpx;height: 10rpx;text-align: center;line-height: 10rpx;">
								<image src="../../static/hei_xia.png" class="bfbimages"></image>
							</view>
						</view>
					</view>
				</view>

				<view class="cj_hb_list" style="margin: 60rpx auto 0;" v-if="FnaweiList[2].isA">
					<view class="cj_hb_list_L" style="justify-content: flex-end;">
						<text>地图选点</text>
					</view>
					<view class="cj_hb_list_R">
						<view class="cj_hb_list_R_inp2" @click="Mapselete" style="justify-content: space-between;">
							<input type="text" placeholder="请选择"
								style="margin-left: 10rpx;margin-right: 10rpx;width: 150rpx;color: #333333;"
								:disabled="true" v-model="MapCweiz" />
							<view class="flex"
								style="width: 25rpx;height: 25rpx;text-align: center;line-height: 25rpx;">
								<image src="../../static/dqwz.png" class="bfbimages"></image>
							</view>
						</view>
					</view>
				</view>

				<view class="cj_hb_list" style="margin: 60rpx auto 0;">
					<view class="cj_hb_list_L" style="justify-content: flex-end;">
						<text>方圆公里数</text>
					</view>
					<view class="cj_hb_list_R">
						<view class="cj_hb_list_R_inp2">
							<input type="text" placeholder="请输入"
								style="margin-left: 10rpx;margin-right: 10rpx;width: 150rpx;color: #333333;"
								v-model="distance_nums" @input='input' />
							<text style="color: #666666;">公里</text>
						</view>
					</view>
				</view>

				<view class="cj_hb_list_map">
					<map id="myMap" style="width:100%;height:100%;" :markers="markers" :latitude="latitude"
						:longitude="longitude" :scale="scale"></map>
				</view>

				<view class="cj_hb_list" style="margin: 30rpx auto 0;">
					<view class="cj_hb_list_L">
						<text>投放时长</text>
					</view>
					<view class="cj_hb_list_R"></view>
				</view>
				<view class="launch_date_tab">
					<view :class="item.isA?'launch_date_tab_c1':'launch_date_tab_c'" v-for="(item,index) in dateTab"
						:key="index" @click="Cdatetab(item)">{{item.title}}</view>
				</view>

				<view class="cj_hb_list" style="margin: 30rpx auto 0;">
					<view class="cj_hb_list_L">
						<text>目前广告位</text>
					</view>
					<view class="cj_hb_list_R"></view>
				</view>
				<view class="launch_gg_tab">
					<view :class="item.isA?'launch_gg_tab_c1':'launch_gg_tab_c'" v-for="(item,index) in ggTab"
						:key="index" @click="Cggtab(item)">
						<view :style="{color:item.isA?'#FFFFFF':'#333333'}">{{index + 1}}</view>
						<view :style="{color:item.isA?'#FFFFFF':'#FE4B27'}">{{item.ad_price}}元</view>
					</view>
				</view>

				<view class="cj_hb_list" style="margin: 30rpx auto 0;">
					<view class="cj_hb_list_L">
						<text>竞价金额</text>
					</view>
					<view class="cj_hb_list_R">
						<view class="cj_hb_list_R_inp2">
							<input type="text" placeholder="请输入" style="margin-left: 10rpx;margin-right: 10rpx;"
								v-model="ad_price" />
							<text>元</text>
						</view>
					</view>
				</view>

				<view class="cj_hb_list_text" style="font-size: 28rpx;color: #F95518;">
					<text><text style="color: #999999;">账户余额：</text>￥{{SJbalance}}</text>
					<view style="display: flex;align-items: center;justify-content: flex-end;margin-left: 100rpx;"
						@click="LinkQianBao">
						<text>去充值</text>
						<view class="flex" style="width: 20rpx;height: 23rpx;text-align: center;line-height: 23rpx;">
							<image src="../../static/red_right.png" class="bfbimages"></image>
						</view>
					</view>
				</view>



				<view class="cj_hb_list" style="margin: 30rpx auto 0;">
					<view class="cj_hb_list_L" style="width: 400rpx;">
						<text>Banner图上传</text>
					</view>
					<view class="cj_hb_list_R"></view>
				</view>

				<view class="cj_hb_list_gg_tp">
					<view class="set_box_up_for_src" v-if="image!==''" @click="Upimages">
						<image :src="image" class="bfbimages"></image>
					</view>

					<view class="set_box_up_for_up" v-else @click="Upimages">
						<view class="flex">
							<image src="../../static/xj.png" class="bfbimages"></image>
						</view>
						<view>上传</view>
					</view>
				</view>


			</view>
		</view>


		<view class="launch_btn">
			<text style="display: inline-block;margin-left: 30rpx;">合计:<text
					style="color: #FE4825;">￥{{ad_price==0?'0':`${ad_price}`}}</text></text>
			<view class="launch_btn_text" @click="Cbtn">确定</view>
		</view>


		<cityPicker :column="column" :default-value="defaultValue" :mask-close-able="maskCloseAble" @confirm="confirmXZ"
			@cancel="cancel" :visible="visible" />
	</view>
</template>

<script>
	import cityPicker from '../../uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker.vue'
	export default {
		data() {
			return {
				menuButtonInfo: null,
				latitude: 0, //纬度
				longitude: 0, //经度
				scale: 14, //地图缩放程度
				markers: [],
				dateTab: [],
				ggTab: [],
				activity_id: null,
				FnaweiList: [{
						name: '选择全网',
						isA: true
					},
					{
						name: '行政范围',
						isA: false
					},
					{
						name: '地图选点',
						isA: false
					}
				],
				send_range: 1, //发放范围 1=全网  2=行政  3=选点
				min_lng: 0, //经度最小值
				min_lat: 0, //纬度最小值
				equal_money: '', //等额金额
				MapCweiz: '',
				max_lat: 0,
				max_lng: 0,
				expire_type: '',
				ad_price: '',
				image: '',
				SJbalance: 0.00,
				ad_listData: '',
				coordinate: '',
				distance_nums: ''
			}
		},
		computed: {
			computedTop() {
				if (this.menuButtonInfo) {
					return `${this.menuButtonInfo.height * 2 - 6}px`;
				}
				return '0px';
			},
		},
		onLoad() {
			const info = uni.getMenuButtonBoundingClientRect();
			this.menuButtonInfo = info;
		},
		created() {
			this.GGsetApi()
		},
		onShow() {
			this.SJbalance = uni.getStorageSync('SJbalance')
		},
		components: {
			cityPicker
		},
		methods: {
			input() {
				if (this.distance_nums !== '') {
					const distance_numsX = this.distance_nums; // 输入的距离，单位为km  
					const range = this.getLatLngRange(this.min_lat, this.min_lng, distance_numsX);
					console.log(range, '计算后的经纬度');
				}
			},
			LinkQianBao() {
				uni.navigateTo({
					url: '/pages/wallet/wallet'
				})
			},
			Cbtn() {
				let number = this.expire_type.match(/\d+/)[0]; // 提取数字  
				console.log(number); // 输出: 3  
				let dara = {
					send_range: this.send_range,
					min_lng: this.min_lng, //经度最小值
					min_lat: this.min_lat, //纬度最小值
					max_lat: this.max_lat, //纬度最大值
					max_lng: this.max_lng, //经度最大值
					expire_type: number,
					ad_price: this.ad_price,
					image: this.image
				}
				this.$request('/api/merchant/merchantBanner', dara).then((res) => {
					console.log(res, '提交');
					if (res.code == 1) {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
						setTimeout(() => {
							uni.navigateBack()
						}, 2000)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
						return false
					}
				})
			},
			GGsetApi() {
				this.$request('/api/index/getMerchantSetting').then((res) => {
					console.log(res, '广告设置');
					//投放时长
					for (var i = 0; i < res.data.expire_type_list.length; i++) {
						res.data.expire_type_list[i].isA = false
					}
					this.dateTab = res.data.expire_type_list
					this.dateTab[0].isA = true //默认选中第一个
					this.dateTabOneId = this.dateTab[0].id
					// 广告位
					for (var i = 0; i < res.data.ad_list.length; i++) {
						res.data.ad_list[i].isA = false
					}

					this.ad_listData = res.data.ad_list
					for (var i = 0; i < res.data.ad_list.length; i++) {
						if (res.data.ad_list[i].expire_type === this.dateTabOneId) {
							this.ggTab.push(res.data.ad_list[i])
						}
					}


				})
			},
			Cggtab(item) {
				for (var i = 0; i < this.ggTab.length; i++) {
					this.ggTab[i].isA = false
				}
				item.isA = true
				this.ad_price = item.ad_price
			},
			Cdatetab(item) {
				for (var i = 0; i < this.dateTab.length; i++) {
					this.dateTab[i].isA = false
				}
				item.isA = true
				this.expire_type = item.title

				this.ggTab = []
				this.dateTabOneId = item.id

				for (var i = 0; i < this.ad_listData.length; i++) {
					if (this.ad_listData[i].expire_type === this.dateTabOneId) {
						this.ggTab.push(this.ad_listData[i])
					}
				}


			},
			Back() {
				uni.navigateBack()
			},
			Upimages() {
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: this.$uts + '/api/common/upload', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								token: uni.getStorageSync('token'),
								type: 2
							},
							header: {
								'token': uni.getStorageSync('token'),
								'server': 1,
							},
							success: (res) => {
								let Ima = JSON.parse(res.data)
								console.log(Ima.data.url, 'Ima-Ima-Ima');
								this.image = Ima.data.url
							}
						});
					}
				});
			},
			confirmXZ(val) {
				console.log(val)
				this.coordinate = val.name
				this.visible = false

				const address = `${val.name}`;
				const key = 'c480611b1013378bc1145c5394b892c0'; // 替换为您的高德地图API密钥

				uni.request({
					url: `https://restapi.amap.com/v3/geocode/geo?key=${key}&address=${address}`,
					success: (res) => {
						console.log(res);
						if (res.data.status === '1' && res.data.count !== '0') {
							const location = res.data.geocodes[0].location;
							const [longitude, latitude] = location.split(',');

							this.min_lat = latitude
							this.min_lng = longitude
							if (this.distance_nums !== '') {
								const distance_numsX = this.distance_nums; // 输入的距离，单位为km  
								const range = this.getLatLngRange(this.min_lat, this.min_lng, distance_numsX);
								console.log(range, '计算后的经纬度');
							}
						} else {
							uni.showToast({
								title: '网络错误:获取经纬度失败',
								icon: 'none',
								duration: 2000
							});
						}
					},
					fail: (error) => {
						console.error(error);
					},
				});

			},
			Mapselete() {
				uni.chooseLocation({
					success: res => {
						console.log(res, '点击得');
						this.MapCweiz = res.address
						this.min_lat = res.latitude
						this.min_lng = res.longitude
						if (this.distance_nums !== '') {
							const distance_numsX = this.distance_nums; // 输入的距离，单位为km  
							const range = this.getLatLngRange(this.min_lat, this.min_lng, distance_numsX);
							console.log(range, '计算后的经纬度');
						}
					},
					fail: err => {
						console.log(err, 'err-err-err');
						wx.showToast({
							title: '授权失败',
							icon: 'none',
							duration: 1000
						})
					}
				})
			},
			getLatLngRange(latitude, longitude, distance) {
				const earthRadius = 6371; // 地球半径，单位为千米  

				// 转换距离到弧度  
				const latRange = distance / earthRadius * (180 / Math.PI);
				const lonRange = latRange / Math.cos(latitude * (Math.PI / 180));

				const north = latitude + latRange; // 北边界  
				const south = latitude - latRange; // 南边界  
				const east = longitude + lonRange; // 东边界  
				const west = longitude - lonRange; // 西边界  

				// 组合南北和东西的边界  
				const range = {
					vertical: {
						north: north,
						south: south
					},
					horizontal: {
						east: east,
						west: west
					}
				};

				// 打印南北和东西范围  
				// console.log("南北范围: ", range.vertical);
				// console.log("东西范围: ", range.horizontal);
				// this.max_lat = range.vertical
				// this.max_lng = range.horizontal

				return range; // 返回组合后的边界信息  
			},
			SeleteDW() {
				console.log('点击选择行政范围');
				this.visible = true
			},
			Cfwei(item) {
				console.log('点击的范围', item);
				for (var i = 0; i < this.FnaweiList.length; i++) {
					this.FnaweiList[i].isA = false
				}
				item.isA = true
				//发放范围 1=全网  2=行政  3=选点
				if (item.name == '选择全网') {
					this.send_range = 1
				} else if (item.name == '行政范围') {
					this.send_range = 2
				} else {
					this.send_range = 3
				}
			},
		}
	}
</script>

<style lang="scss">
	.launch {
		width: 100vw;
		min-height: 100vh;
		float: left;

		.message_top {
			width: 100%;
			position: relative;
			height: 420rpx;
			background: linear-gradient(180deg, #FBEADA 0%, #FFFFFF 100%);

			.message_top_title {
				width: 100%;
				text-align: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #333333;
				position: absolute;
				left: 0;
				z-index: 2;
			}

			.message_top_back {
				width: 44rpx;
				height: 44rpx;
				position: absolute;
				left: 30rpx;
				z-index: 9;
			}
		}

		.launch_bto {
			width: 100vw;
			height: 1800rpx;
			position: relative;

			.launch_bto_box {
				width: 690rpx;
				height: 1700rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 3rpx 25rpx 0rpx rgba(88, 64, 64, 0.09);
				border-radius: 20rpx;
				position: absolute;
				left: 50%;
				top: -230rpx;
				z-index: 9;
				transform: translate(-50%, 0);
				z-index: 9;
				padding-top: 50rpx;

				.launch_bto_box_one {
					width: 630rpx;
					height: auto;
					margin: 0 auto;
					display: flex;
					align-items: center;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
				}
			}
		}
	}

	.cj_hb_list {
		width: 650rpx;
		height: 70rpx;
		display: flex;
		align-items: center;
		margin: 0 auto;

		.cj_hb_list_L {
			width: 160rpx;
			height: 100%;
			display: flex;
			align-items: center;
			line-height: 70rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #333333;
		}

		.cj_hb_list_R {
			margin-left: 25rpx;
			width: 465rpx;
			height: 100%;
			display: flex;
			align-items: center;

			.cj_hb_list_R_inp {
				width: 465rpx;
				height: 68rpx;
				background: #F7F7F7;
				border-radius: 8rpx;
				border: 2rpx solid #ECECEC;
				display: flex;
				align-items: center;
			}

			.cj_hb_list_R_inp2 {
				width: 240rpx;
				padding-bottom: 15rpx;
				display: flex;
				align-items: center;
				border-bottom: 2rpx solid #333333;

			}

			.cj_hb_list_R_tab,
			.cj_hb_list_R_tab1 {
				width: 136rpx;
				height: 56rpx;
				background: #F2F2F2;
				border-radius: 40rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				text-align: center;
				line-height: 56rpx;
				margin-right: 30rpx;
			}

			.cj_hb_list_R_tab1 {
				background: linear-gradient(270deg, #FE4624 0%, #FF8143 100%);
				color: #FFFFFF;
			}

			.cj_hb_list_selete {
				flex: 3;
				display: flex;
				align-items: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
			}

		}
	}

	.cj_hb_list_map {
		width: 650rpx;
		height: 300rpx;
		border-radius: 10rpx;
		border: 2rpx solid #E6E6E6;
		margin: 20rpx auto 0;
		overflow: hidden;
	}

	.launch_date_tab {
		width: 650rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 20rpx auto 0;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;

		.launch_date_tab_c,
		.launch_date_tab_c1 {
			width: 160rpx;
			height: 60rpx;
			background: #F7F7F7;
			border-radius: 40rpx;
			border: 2rpx solid #E6E6E6;
			text-align: center;
			line-height: 60rpx;
		}

		.launch_date_tab_c1 {
			background: linear-gradient(270deg, #FE4624 0%, #FF8143 100%);
			color: #FFFFFF;
		}
	}

	.launch_gg_tab {
		width: 650rpx;
		// height: 120rpx;
		margin: 20rpx auto 0;
		overflow-x: scroll;
		white-space: nowrap;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;

		.launch_gg_tab_c,
		.launch_gg_tab_c1 {
			width: 110rpx;
			height: 120rpx;
			background: #F7F7F7;
			border-radius: 40rpx;
			border: 2rpx solid #E6E6E6;
			padding-top: 20rpx;
			display: inline-block;
			margin-left: 20rpx;

		}

		.launch_gg_tab_c1 {
			background: linear-gradient(270deg, #FE4624 0%, #FF8143 100%);
		}

		.launch_gg_tab_c>view:nth-child(1),
		.launch_gg_tab_c>view:nth-child(2),
		.launch_gg_tab_c1>view:nth-child(1),
		.launch_gg_tab_c1>view:nth-child(2) {
			width: 100%;
			height: auto;
			text-align: center;
		}

		.launch_gg_tab_c>view:nth-child(2),
		.launch_gg_tab_c1>view:nth-child(2) {
			margin-top: 10rpx;
		}
	}

	.cj_hb_list_text {
		width: 650rpx;
		height: 30rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin: 30rpx auto 0;
	}

	.cj_hb_list_gg_tp {
		width: 650rpx;
		min-height: 140rpx;
		max-height: 300rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin: 10rpx auto 0;

		.set_box_up_for_up {
			width: 180rpx;
			height: 140rpx;
			overflow: hidden;
			padding-top: 40rpx;
			background-color: #F2F2F2;
		}

		.set_box_up_for_up>view:nth-child(1) {
			width: 48rpx;
			height: 48rpx;
			text-align: center;
			line-height: 48rpx;
			margin: 0 auto;
		}

		.set_box_up_for_up>view:nth-child(2) {
			width: 100%;
			height: auto;
			text-align: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			margin-top: 20rpx;
		}

		.set_box_up_for_src {
			width: 180rpx;
			height: 180rpx;
			overflow: hidden;
			margin-right: 20rpx;
		}
	}

	.launch_btn {
		width: 100%;
		height: 180rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #FFFFFF;
		z-index: 9;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;

		.launch_btn_text {
			width: 420rpx;
			height: 100rpx;
			background: linear-gradient(270deg, #FE4624 0%, #FF8143 100%);
			border-radius: 50rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 100rpx;
			margin-right: 30rpx;
		}
	}
</style>